<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员统计表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="warsper">
        <div class="header">
            <h1>学员信息表</h1>
            <p style="font-weight: bolder">1804</p>
        </div>
        <div class="container">
            <div class="banner">
                <h3>添加</h3>
                <input type="text" placeholder="姓名" id="n">
                <select id="s">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <input type="number" placeholder="年龄" id="a">
                <button id="btn">添加</button>
            </div>
            <div class="main">
                <h3>列表</h3>
                <div class="m1">
                    <span>名字</span>
                    <span>性别</span>
                    <span>年龄</span>
                </div>
                <div class="list">
                     <ul id="list">
                        </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        function dome(){
            var xmlhttp;
            if (window.XMLHttpRequest)
            { xmlhttp=new XMLHttpRequest();
            } else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var  json = JSON.parse(xmlhttp.responseText);
                    console.log(json);
                    document.querySelector("#list").innerHTML = '';

                    for(var i = json.data.length-1 ; i >= 0 ; i --){
                        var name = document.createElement("span");
                        name.innerHTML = json.data[i].studentName;
                        var sex = document.createElement("span");
                        sex.innerHTML = json.data[i].sex;
                        var age = document.createElement("span");    
                        age.innerHTML = json.data[i].age;
                        var li = document.createElement("li");
                        li.appendChild(name);
                        li.appendChild(sex);
                        li.appendChild(age);
                        document.querySelector("#list").appendChild(li);
                    }
                }
            };
            xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
            xmlhttp.send();
        }
        dome();
            
        
        document.querySelector("#btn").addEventListener('click',function () {
            var n = document.querySelector("#n").value;
            var s = document.querySelector("#s").value;
            var a = document.querySelector("#a").value;
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    dome();
                    //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
            xmlhttp.send();




        })



    </script>

</body>
</html>